<template>
    <!-- 左侧（折叠按钮 + 标签页）和右侧（用户信息 + 下拉菜单）两部分 -->
     <!-- 使用 flex 布局实现左右两端对齐（justify-content: space-between -->
    <div class ="header-container">
        <div class="header-left flex-box">
             <!-- 菜单折叠/展开按钮 -->
            <el-icon class="icon" size="20" @click="menuStore.collapseMenu()"><Fold /></el-icon>
            <ul class="flex-box">
                <!-- 用标签的路由路径作为唯一标识
                动态添加 selected 类，当当前路由路径（route.path）与标签路径一致时，标签高亮。 -->
                <li
                v-for="(item,index) in selectMenu" 
                :key="item.path"
                :class="{selected: route.path === item.path}"
                class="tab flex-box">
                <el-icon size="12" >
                    <component :is="item.icon"></component>
                </el-icon>
                <!-- 标签文字（路由链接） -->
                <router-link class="text flex-box " :to="{path:item.path}" @click="handleTagClick(item)">
                     {{ item.name }}
                </router-link>
               
                <el-icon  size="12" class="close" @click="closeTab(item,index)"><Close /></el-icon>
                </li>
            </ul>
        </div>
        <div class="header-right">
             <el-dropdown @command="handleClick">
                <div class="el-dropdown-link flex-box">
                <el-avatar
                     :src="userInfo.avatar"
                />
                <p class="user-name">{{ userInfo.name }}</p>
                </div>
                 <!-- 下拉菜单内容 -->
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="cancel">退出</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>


    </div>
</template>

<script setup>
import { useMenuStore } from '../store/menu'
import { computed, watch } from 'vue';
//为了比对tab栏的地址与当前地址高亮处理
import { useRoute,useRouter } from 'vue-router';

//拿到store的实例
const menuStore = useMenuStore()
//当前的路由对象
const route = useRoute()
const router= useRouter()
//读取 Pinia 的 selectMenu 并渲染 tag
const selectMenu = computed(() => menuStore.selectMenu)

//头像的动态
const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'))

// 监听路由变化，自动更新菜单高亮状态
watch(() => route.path, (newPath) => {
    // 只有在有菜单数据时才更新
    if (menuStore.routerList.length > 0) {
        menuStore.updateMenuActiveByPath(newPath)
    }
}, { immediate: true })

//点击tag标签时同步更新菜单高亮
const handleTagClick = (item) => {
    // 根据点击的 tag 路径更新菜单高亮状态
    menuStore.updateMenuActiveByPath(item.path)
}

//点击关闭tab
const closeTab = (item, index) => {
    menuStore.closeMenu(item)
    //删除的是非当前页tab
    if (route.path !== item.path) {
        return
    }
    //selectMenu.value 就是 store.state.menu.selectMenu s数组本身
    const selectMenuData = selectMenu.value
    //删除的是最后一项
    if (index === selectMenuData.length) {
        //如果只有一个tab,跳转到根路径
        if (!selectMenuData.length) {
            router.push('/')
        }
        else {
            router.push({
                path: selectMenuData[index - 1].path

            })
        }
    }
    //删除的是中间位置
    else {
        router.push({
            path: selectMenuData[index].path
        })

    }
}
// 退出登录逻辑
const handleClick = (command) => {
    if (command === "cancel") {
        localStorage.removeItem('pz_token')
        localStorage.removeItem('pz_userInfo')
        //清除持久化信息
        localStorage.removeItem('pz_v3pz')
        window.location.href = window.location.origin
       
    }
}
</script>

<style lang="less" scoped>
.flex-box {
    display: flex;
    align-items: center;
    height: 100%;
}
.header-container{
    display: flex;
    //水平方向两端对齐、首尾两个弹性项分别贴紧父元素的两端,
    // 垂直方向居中对齐
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background-color: #fff;
    padding-right: 25px;
    .header-left {
        height: 100%;
        .icon{
            width:45px;
            height: 100%;
        }
        .icon:hover{
            background-color: #f5f5f5;
            //鼠标变小手
            cursor: pointer;
        }
        .tab {
            padding: 0 10px;
            height: 100%;
            .text {
                margin:0 5px;  
            }
            .close {
                visibility: hidden;
            }
            //与tab同级
           &.selected{
            a{
                color:#409eff
            }
            i{
                color: #409eff;
            }
            background-color: #f5f5f5;
          }
          }
          
         .tab:hover {
                background-color: #f5f5f5;
                .close {
                 visibility: inherit;
                 cursor: pointer;
                 color: #000;
            }
        }

    }
    .header-right{
        .user-name {
            margin-left: 10px;
        }

    }
    a{
        height: 100%;
        color:#333;
        font-size: 15px;
    }



}
</style> 